	<template>
	<div class="goodsSty">
	 <router-link tag="div" :to="'/home/goodsInfo/'+goodsItem.id" class="goodsItem" v-for="(goodsItem,goodsIndex) in goodsList" :key="goodsIndex">
	 	<div class="goodsDetail">
	 		<img :src="goodsItem.img_url"/>
	 		<p>{{goodsItem.title}}</p>
	 	</div>
	 	<div class="goodsPrice">
	 		<p>
	 			<span class="price">¥{{goodsItem.sell_price}}</span>
	 			<span class="linePrice">¥{{goodsItem.market_price}}</span>
	 		</p>
	 	</div>
	 	<div class="goodsIntro">
	 		<p>热卖中</p>
	 		<p>剩余{{goodsItem.stock_quantity}}件</p>	 		
	 	</div>

	 </router-link>
	 <mt-button type="danger" size="large" @click="loadMore" style="margin-top: 10px">加载更多</mt-button>

	</div>
	</template>


	<script>
	import comment from '../sub-components/comment.vue'
	export default{	
	  data(){
	    return{
	      goodsList:[],
	      pageIndex:1,
	      loadAll:false

	    }
	  },
	  components:{
	  	comment
	  },
	  created(){
	  console.log('123')
	  this.getGoodsList()

	  },
	  methods:{
	     async getGoodsList(){
	   	const {data}=await this.$http.get(`/api/getgoods?pageindex=${this.pageIndex}`)
	   	if(data.status===0){
	   		if(data.message.length<=0){
	   			this.loadAll=true
	   			return
	   		}
			this.goodsList=[...this.goodsList,...data.message]
	   	}
	   },
	loadMore(){
		if(!this.loadAll){
			this.pageIndex+=1
			this.getGoodsList()
		}
		
	},
	}
	}
	</script>

	<style lang="less">
	.goodsSty{
		padding: 10px;
		padding-bottom:60px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		.goodsItem{
			width: 48%;
			box-shadow: 0px 2px 10px 0.5px rgba(0,0,0,0.3);
			margin-bottom: 15px;
			padding:10px;
			.goodsDetail{
				width: 100%;
				background: #fff;
				text-align: center;
				p{
					font-weight: bold;
					text-align: left;
					display: -webkit-box;
					-webkit-box-orient:vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp:2;
				}
			}
			.goodsPrice{
				.price{
					color: red;
					font-size: 22px;
					font-weight: bold;
					margin-right:10px;

				}
				.linePrice{
					font-size: 16px;
					color:#ccc;
					text-decoration: line-through;

				}
			}
			.goodsIntro{
				display: flex;
				justify-content: space-between;
				align-items: center;
				color:#ccc;
				font-size: 16px;
				p{
					margin-bottom: 0px;
				}
			}

		}
		
	}
	/*.goodsSty:after{
		content:'';
		width: 50%
	}*/

	</style>	
